<template src="./template.html"></template>

<script>
export default {
  name: 'BlockCircleProgress',
  props: {
    totalMilliseconds: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentTime: 0,
      timer: null,
      canvas: null,
      ctx: null,
      blocks: [],
      radius: 100,
      blockWidth: 4,
      blockHeight: 6,
      blockGap: 4,
      totalBlocks: 0
    }
  },
  computed: {
    timeDisplay() {
      const totalSeconds = Math.floor(this.currentTime / 1000)
      const minutes = Math.floor(totalSeconds / 60)
      const seconds = totalSeconds % 60
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    },
    progress() {
      // 无限计时模式，不显示进度
      if (this.totalMilliseconds === -1) return 0
      if (this.totalMilliseconds === 0) return 0
      return Math.min(this.currentTime / this.totalMilliseconds, 1)
    },
    isInfiniteMode() {
      return this.totalMilliseconds === -1
    }
  },
  methods: {
    start() {
      this.stop()
      this.currentTime = 0
      this.timer = setInterval(() => {
        this.currentTime += 1000
        // 无限计时模式下，不需要更新圆环
        if (!this.isInfiniteMode) {
          this.drawProgress()
        }
        // 只有非无限计时模式才检查停止条件
        if (!this.isInfiniteMode && this.currentTime >= this.totalMilliseconds) {
          this.stop()
        }
      }, 1000)
      this.drawProgress()
    },
    stop() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getDuration() {
      return this.currentTime
    },
    reset() {
      this.stop()
      this.currentTime = 0
      this.drawProgress()
    },
    initCanvas() {
      this.canvas = this.$refs.canvas
      if (!this.canvas) return

      this.ctx = this.canvas.getContext('2d')

      // 设置画布大小
      const size = (this.radius + 20) * 2
      this.canvas.width = size
      this.canvas.height = size

      // 计算圆环周长和需要的方块数量
      const circumference = 2 * Math.PI * this.radius
      const blockWithGap = this.blockHeight + this.blockGap
      this.totalBlocks = Math.floor(circumference / blockWithGap)

      // 计算每个方块的位置和角度
      this.blocks = []
      const angleStep = (2 * Math.PI) / this.totalBlocks

      for (let i = 0; i < this.totalBlocks; i++) {
        const angle = i * angleStep - Math.PI / 2 // 从顶部开始
        this.blocks.push({
          angle,
          x: this.radius * Math.cos(angle),
          y: this.radius * Math.sin(angle)
        })
      }

      this.drawProgress()
    },
    drawProgress() {
      if (!this.ctx || !this.canvas) return

      const centerX = this.canvas.width / 2
      const centerY = this.canvas.height / 2

      // 清空画布
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

      // 计算需要高亮的方块数量
      const activeBlocks = Math.floor(this.totalBlocks * this.progress)

      // 绘制每个方块
      this.blocks.forEach((block, index) => {
        this.ctx.save()

        // 移动到中心点
        this.ctx.translate(centerX, centerY)
        // 移动到方块位置
        this.ctx.translate(block.x, block.y)
        // 旋转方块使其垂直于圆心
        this.ctx.rotate(block.angle + Math.PI / 2)

        // 设置颜色
        const color = index < activeBlocks ? '#315BF4' : '#EBEDEF'
        this.ctx.fillStyle = color

        // 绘制方块（中心对齐）
        this.ctx.fillRect(
          -this.blockWidth / 2,
          -this.blockHeight / 2,
          this.blockWidth,
          this.blockHeight
        )

        this.ctx.restore()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCanvas()
    })
  },
  beforeDestroy() {
    this.stop()
  }
}
</script>
